<template>
  <view class="pwd-retrieve-container">
	<view>
		<u-navbar title="修改密码" @leftClick="handleToMine" :placeholder="true" />
	</view>
    <uni-forms class="change-password" ref="form" :value="user">
      <uni-forms-item name="oldPassword">
		  <view class="uni-input-wrapper">
		      <input class="uni-input" placeholder="请输入旧密码" :password="show.oldPassword" v-model="user.oldPassword"/>
		      <uni-icons type="eye" size="20" @click="changeState('old')" :style="{ display: show.oldPassword ? 'none': 'block'}"/>
			  <img :src="closeEye" class="icon-eye" @click="changeState('old')" :style="{ display: show.oldPassword ? 'block': 'none'}"/>
		  </view>
      </uni-forms-item>
	  <uni-forms-item name="newPassword">
	  		  <view class="uni-input-wrapper">
	  		      <input class="uni-input" placeholder="请输入新密码" :password="show.newPassword" v-model="user.newPassword"/>
	  		      <uni-icons type="eye" size="20"  @click="changeState('new')" :style="{ display: show.newPassword ? 'none': 'block'}"/>
				  <img :src="closeEye" class="icon-eye"  @click="changeState('new')" :style="{ display: show.newPassword ? 'block': 'none'}"/>
	  		  </view>
	  </uni-forms-item>
	  <uni-forms-item name="confirmPassword">
	  		  <view class="uni-input-wrapper">
	  		      <input class="uni-input" placeholder="请输入确认密码" :password="show.confirmPassword" v-model="user.confirmPassword"/>
	  		      <uni-icons type="eye" size="20"  @click="changeState('confirm')" :style="{ display: show.confirmPassword ? 'none': 'block'}"/>
				  <img :src="closeEye" class="icon-eye"  @click="changeState('confirm')" :style="{ display: show.confirmPassword ? 'block': 'none'}"/>
	  		  </view>
	  </uni-forms-item>
      <!-- <button type="primary" @click="submit">提交</button> -->
    </uni-forms>
	<view class="action-btn">
	   <button @click="submit" class="login-btn cu-btn block bg-blue lg round">提交</button>
	</view>
  </view>
</template>

<script>
  // import { updateUserPwd } from "@/api/system/user"

  export default {
    data() {
      return {
		closeEye: 'static/images/icon/close-eye.png',
		show: {
			oldPassword: true,
			newPassword: true,
			confirmPassword: true
		},
        user: {
          oldPassword: undefined,
          newPassword: undefined,
          confirmPassword: undefined,
        },
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: '旧密码不能为空'
            }]
          },
          newPassword: {
            rules: [{
                required: true,
                errorMessage: '新密码不能为空',
              },
              {
                minLength: 6,
                maxLength: 20,
                errorMessage: '长度在 6 到 20 个字符'
              }
            ]
          },
          confirmPassword: {
            rules: [{
                required: true,
                errorMessage: '确认密码不能为空'
              }, {
                validateFunction: (rule, value, data) => data.newPassword === value,
                errorMessage: '两次输入的密码不一致'
              }
            ]
          }
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
	  changeState(type){
		  switch(type){
			case 'old':
				this.show.oldPassword = !this.show.oldPassword
				break
			case 'new' :
				this.show.newPassword = !this.show.newPassword
				break
			case 'confirm':
				this.show.confirmPassword = !this.show.confirmPassword
				break
		  }
	  },
      submit() {
        this.$refs.form.validate().then(res => {
          // updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
          //   this.$modal.msgSuccess("修改成功")
          // })
		  if(this.user.oldPassword !== 'admin123'){
			  setTimeout(() => {
				this.$modal.msgError("修改失败，原始密码错误")
			  }, 500)
		  }else{
			  setTimeout(() => {
				  this.$modal.msgSuccess("修改成功")
			  }, 500)
		  }
        })
      },
	  handleToMine(){
		this.$tab.switchTab('/pages/mine/index')
	  }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f6f7;
  }
  .change-password .uni-forms-item:not(:last-child){
  	  .uni-input-wrapper{
  	  		 border-bottom: 1px solid #e5e2e2 !important;
  	  }
  }
  .change-password{
	  background-color: #FFF;
	  padding: 22px 10px 0px 10px;
	  margin-top: 10px;
	 .uni-input-wrapper {
	     /* #ifndef APP-NVUE */
	     display: flex;
	     /* #endif */
	     padding: 8px 13px;
	     flex-direction: row;
	     flex-wrap: nowrap;
	     background-color: #FFFFFF;
	 }
	 .uni-input {
	     height: 28px;
	     line-height: 28px;
	     font-size: 15px;
	     padding: 0px;
	     flex: 1;
	     background-color: #FFFFFF;
	 }
	 .icon-eye{
		 margin-top: 3px;
		 width: 20px;
		 height: 20px;
		 cursor: pointer;
	 }
	 .uni-icons {
	     font-family: uniicons;
	     font-weight: normal;
	     font-style: normal;
	 	 color: gray !important;
	 } 
  }
  .action-btn{
	  padding: 0px 20%;
	  .login-btn {
	  		background-color: #1d4ea2;
	        margin-top: 40px;
	        height: 45px;
	    }
  }
  .pwd-retrieve-container {
    // padding-top: 36rpx;
    // padding: 15px;
  }

</style>
